<template>
	<view class="avatar" :style="{width: `${size}rpx`, height: `${size}rpx`}">
		<image v-if="url" mode="widthFix" :style="{width: `${size}rpx`, height: `${size}rpx`}" class="active_avatar" :src="url"></image>
		
		<image v-else mode="widthFix" src="/static/image/avatar.svg" class="empty"></image>
	</view>
</template>

<script setup>
	import { defineProps } from 'vue'
	
	const props = defineProps({
		url: {
			type: String,
			default: ''
		},
		size: {
			type: Number,
			default: 120
		}
	})
</script>

<style scoped lang="scss">
.avatar {
	border-radius: 50%;
	background-color: #BACEFD;
	
	.active_avatar {
		border-radius: 50%;
	}
	
	.empty {
		max-width: 100%;
	}
}
</style>